<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>28_CSS复合选择器-属性选择器</title>
        <style>
            /* （1）[属性名] 选中具有某个属性的元素。 */
            /* 找到ul中所有有id属性的标签  不要加引号*/
            /* ul li[id] {
                color: green;
            } */

            /* （2）[属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。 */
            /* 找到ul中li标签的id值为l2 */
            /* ul > li[id="l2"] {
                color: aquamarine;
            } */

            /* （3）[属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。 */
            /* 找到ul中li标签的属性是以l开头的标签 */
            /* ul li[id ^= "l"] {
                color:aquamarine;
            } */

            /* （4）[属性名$="值"]  选中包含某个属性，且属性值以指定的值结尾的元素。 */
            /* 找到ul中的li标签是以1为结尾的标签 */

            /* ul > li[id $= "1"] {
                color: blue;
            }  */

            /* （5）[属性名*=“值”]  选择包含某个属性，属性值包含指定值的元素。 */
            /* 找到ul中li标签的id属性中包含1的标签 */
            /* ul li[id *= "1"] {
                color: chocolate;
            } */

            /* （6）[属性名~=“值”]选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况） */
            /* ~= 一般情况下判断的是一个类选择是由多个选择器组成
              然后使用~= 等于任意一个结果都是可以匹配的
              只能适用于空格间隔的选择器
            */
            /* ul li[class ~= "l6"] {
                color: red;
            } */

            /* （7）[属性名|=“值”]选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。 */
            /* 匹配class属性值中带中横线的标签  但是只能匹配中横线前面的值 */
           
            /* ul > li[class="l7-c7"] {
                color: red;
            } */

            /* ul > li[class*="l7"] {
                color: green;
            } */

            /* ul > li[class |= "l7"] {
                color:yellowgreen
            } */

            /* 不可以使用 */
            ul > li[class |= "c7"] {
                color:brown;
            }

        </style>
    </head>
    <body>
        <ul>
            <li id="l1">东</li>
            <li id="l2">南</li>
            <li id="a3">西</li>
            <li id="a1">北</li>
            <li id="d1d">中</li>
            <li class="l6 c6">发</li>
            <li class="l7-c7">白</li>
        </ul>
    </body>
</html>